<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <title>学志项目</title>
    <script>
        window.onload = function() {
            var swiper = new Swiper('.swiper', {
                slidesPerView: 2,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        }
    </script>
</head>

<body>
    <h1>学志项目</h1>
    <!-- 分类图标 -->
    <div class="warp">
        <div class="nav">
            <a href="#">
                <img src="./imgs/组 22@2x.png" alt="">
                <span>HR面试</span>
            </a>
            <a href="#">
                <img src="./imgs/笔@2x.png" alt="">
                <span>笔试</span>
            </a>
            <a href="#">
                <img src="./imgs/组 24@2x.png" alt="">
                <span>技术面试</span>
            </a>
            <a href="#">
                <img src="./imgs/组 26@2x.png" alt="">
                <span>模拟面试</span>
            </a>
            <a href="#">
                <img src="./imgs/组 25@2x.png" alt="">
                <span>面试技巧</span>
            </a>
            <a href="#">
                <img src="./imgs/组 23@2x.png" alt="">
                <span>薪资查询</span>
            </a>
        </div>
        <!-- 广告图 -->
        <div class="ad">
            <img src="./imgs/组 21@2x.png" alt="">
        </div>
    </div>

    <div class="content">
        <div class="con-hd">
            <h2>就业指导</h2>
            <a href="#">更多>></a>
        </div>

        <div class="job-ad">
            <!-- Swiper -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./upload/jyzd.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/jyzd.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/jyzd.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>

</body>

</html>